<style type="text/less" lang="less" scoped>
  @import url("./index.less");
</style>

<template>
  <el-container>
    <el-aside width="350px" class="content-left-list">
      <div class="ps-panel nav-left-menu" style="height: calc(100% - 30px)">
        <div class="ps-panel-head">
          <span class="ps-panel-head-title">{{
            $route.query.type != "0" ? "文件" : "新闻"
          }}</span>
          <button size="small" type="button" class="el-icon-upload menuTensile ps-right" v-if="$route.query.type != '0'"
            v-on:click="
              uploadVisible = true;
              fileList = [];
            " title="上传"></button>
        </div>
        <div class="ps-panel-body" v-show="webUrls.length == 0">
          <el-empty :image-size="200"></el-empty>
        </div>
        <div v-show="webUrls.length > 0" class="ps-panel-body" v-loading="isloading">
          <el-menu :default-active="active" ref="webMenu" class="el-menu-vertical" style="width: 100%">
            <el-menu-item v-for="item in webUrls" :key="item.id" :index="item.id.toString()" @click="preview(item)">
              {{ item.title }}</el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="pagination">
        <el-pagination small :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total"
          :current-page="paginations.pageIndex" :pager-count="5" @current-change="jump" style="text-align: center">
        </el-pagination>
      </div>
    </el-aside>
    <el-main class="content-main">
      <p class="title" v-html="webData.title"></p>

      <div class="auther" v-html="webData.auther"></div>

      <div class="content" v-html="webData.content"></div>

      <div class="analyze" v-show="webData.title">
        <router-link :to="
            '/connect/imageDetail?type=' +
            $route.query.type +
            '&id=' +
            webData.id
          " target="_self"><i class="iconfont icon-analyze"></i>分析</router-link>
      </div>
    </el-main>

    <el-dialog title="上传文件" :visible.sync="uploadVisible" width="450px">
      <el-upload class="upload-demo" ref="upload" multiple :action="
          this.$store.state.ajaxApi + 'api/newsUpload?type=' + this.uploadType
        " :file-list="fileList" :headers="{ token: token }" accept=".txt" :on-success="uploadSuccess"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取</el-button>
        <el-radio-group v-model="uploadType" size="small" style="margin-left: 10px">
          <el-radio-button :label="0">日志</el-radio-button>
          <el-radio-button :label="1">态势</el-radio-button>
        </el-radio-group>
        <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传txt文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
  export default {
    name: "images",
    data: function () {
      return {
        active: "",
        paginations: {
          pageIndex: 1, // 当前位于哪页
          pageSize: 20, // 页显示多少条
          total: 0, // 总数
          layout: "total, prev, pager, next", // 翻页属性
        },
        webUrls: [],
        webData: {},
        previewVisible: false,
        uploadVisible: false,
        uploadType: 1,
        fileList: [],
        token: sessionStorage.token,

        isloading: false, //左侧列表加载
      };
    },
    methods: {
      jump(i) {
        if (i === undefined) {
          i = this.paginations.pageIndex;
        } else {
          this.paginations.pageIndex = i;
        }

        this.isloading = true;
        this.$store.dispatch("ajaxSetting", {
          //   this.$store.dispatch("ajax", {
          url: "/api/newsList",
          method: "get",
          data: {
            type: this.$route.query.type,
            page: i,
            number: this.paginations.pageSize,
          },
          succeed: (res) => {
            this.isloading = false;
            this.webUrls = res.rows;
            this.paginations.total = res.total;
          },
        });
      },
      preview(row) {
        this.webData = row;
        console.log(row);
        this.webData.auther =
          this.webData.time + "　　来源： " + this.webData.author;
        this.previewVisible = true;
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      init() {
        this.jump(1);
      },
      uploadSuccess() {
        this.jump();
      },
    },
    mounted: function () {
      this.init();
    },
    watch: {
      $route() {
        this.init();
      },
    },
  };
</script>